<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link rel="stylesheet" type="text/css" href="css/reset.css" />
		<link rel="stylesheet" type="text/css" href="css/reset.css" />
		<link rel="stylesheet" type="text/css" href="css/videoshow_css.css" />
		<!-- 新 Bootstrap4 核心 CSS 文件 -->
		<link rel="stylesheet" href="css/css/bootstrap.min.css">

		<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
		<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>

		<!-- popper.min.js 用于弹窗、提示、下拉菜单 -->
		<script src="https://cdn.staticfile.org/popper.js/1.12.5/umd/popper.min.js"></script>

		<!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
		<script src="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/js/bootstrap.min.js"></script>
	</head>

	<body>
		<div id="top-block-video">
			<nav class="navbar navbar-expand-sm bg-light">
				<ul class="navbar-nav">
					<li class="nav-item">
						<a style="color: #000000;text-decoration: none;" class="nav-link" href="index.html">主页</a>
					</li>
					<li class="nav-item">
						<a style="color: #000000;text-decoration: none;" class="nav-link" href="#">商城</a>
					</li>
					<li class="nav-item">
						<a style="color: #000000;text-decoration: none;" class="nav-link" href="#">主持</a>
					</li>
					<li class="nav-item">
						<a style="color: #000000;text-decoration: none;" class="nav-link" href="#">演绎</a>
					</li>
					<li class="nav-item">
						<a style="color: #000000;text-decoration: none;" class="nav-link" href="#">教学</a>
					</li>
					<li class="nav-item">
						<a style="color: #000000;text-decoration: none;" class="nav-link" href="#">婚庆公司</a>
					</li>
					<li class="nav-item">
						<a style="color: #000000;text-decoration: none;" class="nav-link" href="#">往期活动</a>
					</li>
				</ul>
			</nav>
			<div id="search-box">
				<input type="text" name="seach-this" id="seach-this" value="" placeholder="Easy to feel the word" />
				<span id="seach-btn">搜索</span>
			</div>
			<div id="login-box-block">
				<img src="img/logo.jpg" />
			</div>
		</div>
		<div id="video-show-left">
			<div id="video-show-left-top">
				<h4>盘点：那些令人激动人心的婚礼</h4>
				<ul>
					<li class="bread-pian">
						<a style="color: #C0C0C0;text-decoration: none;" href="index.html">主页/</a>
					</li>
					<li class="bread-pian">
						<a style="color: #C0C0C0;text-decoration: none;" href="">活动/</a>
					</li>
					<li class="bread-pian">
						<a style="color: #C0C0C0;text-decoration: none;" href="">婚礼秀/</a>
					</li>
					&nbsp;
					<p style="color: #C0C0C0;">2018年9月21日&nbsp;19:30:30</p>
				</ul>

			</div>
			<div id="video-show-play">
				<div id="video-show-top-box">

				</div>
				<video id="video-show-this" controls="controls">
					<source src="video/VID_20190219_082700.mp4" type="video/mp4"></source>
				</video>
			</div>
			<div id="video-show-text">
				<div id="show-text-block">
					<b>77</b>次播放
				</div>
				<div id="send-text-box">
					<input type="text" name="seach-this" id="send-text-this" value="" placeholder="发送一条快乐的小弹幕吧" />
					<span id="send-text-btn">发送弹幕</span>
				</div>
			</div>
			<div id="video-show-share">
				<div class="container" style="margin-left: 0px;margin-top: 15px;">
					<span class="badge badge-pill badge-default">标签</span>
					<span class="badge badge-pill badge-primary">婚礼秀</span>
					<span class="badge badge-pill badge-success">万达</span>
					<span class="badge badge-pill badge-info">喜乐婚礼</span>
					<span class="badge badge-pill badge-warning">船说</span>
					<span class="badge badge-pill badge-danger">婚礼季</span>
				</div>
			</div>
			<div id="video-show-jianjie">
				<h3>简介：</h3> 这里有一个测试的文字，需要从后台中获取这部分的文字替换之后才能正常显示， 这里有一个测试的文字，需要从后台中获取这部分的文字替换之后才能正常显示， 这里有一个测试的文字，需要从后台中获取这部分的文字替换之后才能正常显示， 这里有一个测试的文字，需要从后台中获取这部分的文字替换之后才能正常显示， 这里有一个测试的文字，需要从后台中获取这部分的文字替换之后才能正常显示，

			</div>
			<div id="video-show-pinluncount">

				<div class="container">
					<h2>评论</h2>

					<!-- Nav tabs -->
					<ul class="nav nav-tabs" role="tablist">
						<li class="nav-item">
							<a class="nav-link active" data-toggle="tab" href="#home">全部评论</a>
						</li>
						<li class="nav-item">
							<a class="nav-link" data-toggle="tab" href="#menu1">热门评论</a>
						</li>
						<li class="nav-item">
							<a class="nav-link" data-toggle="tab" href="#menu2">只看楼主</a>
						</li>
					</ul>

				</div>
				<div id="video-show-pinglun">
					<div id="img-box-touxiang" class="img-box">
						<img src="img/logo.jpg" alt="" />
					</div>
					<div id="textarea-box" class="img-box">
						<textarea name="" rows="3" cols="80"></textarea>
						<span id="pinglunspan">
						发表<br />评论
					</span>
					</div>
				</div>
				<div id="video-show-pinglunarea">
					<div class="tab-content">
						<div id="home" class="container tab-pane active"><br>
							<h3>全部评论</h3>
							<p>这里是用来写全部评论的</p>
						</div>
						<div id="menu1" class="container tab-pane fade"><br>
							<h3>热门评论如下</h3>
							<p>这里是用来写热门评论的</p>
						</div>
						<div id="menu2" class="container tab-pane fade"><br>
							<h3>只看楼主</h3>
							<p>这里是只有楼主的评论</p>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div id="video-show-right">
			<div id="video-text-area">
				<div id="own-show-this">
					<div id="own-show-img" class="own-show-all">
						<img src="img/logo.jpg" alt="" />
					</div>
					<div id="own-show-guanzhu" class="own-show-all">
						<p id="pname">铭天</p>
						<p id="pgexingqianming">不负相遇，见证爱，珍惜爱</p>
						<span id="span-this-place">
							关注十
						</span>
					</div>
				</div>

				<div id="danmu-open-off-show">
					<div id="opean-opean">
						<span id="danmu-list">
						弹幕列表
					</span>
						<span id="open-off">
						收起
					</span>
					</div>
					<div id="play-danmu-time" class="danmu-title">
						时间
					</div>
					<div id="play-danmu-neirong" class="danmu-title">
						弹幕内容(<span>777</span>)
					</div>
					<div id="play-danmu-send-time" class="danmu-title">
						发送时间
					</div>
				</div>

				<div id="danmu-box-this">
					<div class="danmu-this">
						<span id="" class="danmu-this-time">
						00:00
					</span>
						<span id="" class="danmu-this-this">
						火前留名
					</span>
						<span id="" class="danmu-this-sendtime">
						10-10 19:30
					</span>
					</div>
					<!---->
					<div class="danmu-this">
						<span id="" class="danmu-this-time">
						00:00
					</span>
						<span id="" class="danmu-this-this">
						火前留名
					</span>
						<span id="" class="danmu-this-sendtime">
						10-10 19:30
					</span>
					</div>
					<!---->
					<!---->
					<div class="danmu-this">
						<span id="" class="danmu-this-time">
						00:00
					</span>
						<span id="" class="danmu-this-this">
						火前留名
					</span>
						<span id="" class="danmu-this-sendtime">
						10-10 19:30
					</span>
					</div>
					<!---->
					<div class="danmu-this">
						<span id="" class="danmu-this-time">
						00:00
					</span>
						<span id="" class="danmu-this-this">
						火前留名
					</span>
						<span id="" class="danmu-this-sendtime">
						10-10 19:30
					</span>
					</div>
					<!---->
					<div class="danmu-this">
						<span id="" class="danmu-this-time">
						00:00
					</span>
						<span id="" class="danmu-this-this">
						火前留名
					</span>
						<span id="" class="danmu-this-sendtime">
						10-10 19:30
					</span>
					</div>
					<!---->
					<!---->
					<div class="danmu-this">
						<span id="" class="danmu-this-time">
						00:00
					</span>
						<span id="" class="danmu-this-this">
						火前留名
					</span>
						<span id="" class="danmu-this-sendtime">
						10-10 19:30
					</span>
					</div>
					<!---->
					<!---->
					<div class="danmu-this">
						<span id="" class="danmu-this-time">
						00:00
					</span>
						<span id="" class="danmu-this-this">
						火前留名
					</span>
						<span id="" class="danmu-this-sendtime">
						10-10 19:30
					</span>
					</div>
					<!---->
					<!---->
					<div class="danmu-this">
						<span id="" class="danmu-this-time">
						00:00
					</span>
						<span id="" class="danmu-this-this">
						火前留名
					</span>
						<span id="" class="danmu-this-sendtime">
						10-10 19:30
					</span>
					</div>
					<!---->
					<!---->
					<div class="danmu-this">
						<span id="" class="danmu-this-time">
						00:00
					</span>
						<span id="" class="danmu-this-this">
						火前留名
					</span>
						<span id="" class="danmu-this-sendtime">
						10-10 19:30
					</span>
					</div>
					<!---->
					<!---->
					<div class="danmu-this">
						<span id="" class="danmu-this-time">
						00:00
					</span>
						<span id="" class="danmu-this-this">
						火前留名
					</span>
						<span id="" class="danmu-this-sendtime">
						10-10 19:30
					</span>
					</div>
					<!---->
					<!---->
					<div class="danmu-this">
						<span id="" class="danmu-this-time">
						00:00
					</span>
						<span id="" class="danmu-this-this">
						火前留名
					</span>
						<span id="" class="danmu-this-sendtime">
						10-10 19:30
					</span>
					</div>
					<!---->
					<!---->
					<div class="danmu-this">
						<span id="" class="danmu-this-time">
						00:00
					</span>
						<span id="" class="danmu-this-this">
						火前留名
					</span>
						<span id="" class="danmu-this-sendtime">
						10-10 19:30
					</span>
					</div>
					<!---->
					<!---->
					<div class="danmu-this">
						<span id="" class="danmu-this-time">
						00:00
					</span>
						<span id="" class="danmu-this-this">
						火前留名
					</span>
						<span id="" class="danmu-this-sendtime">
						10-10 19:30
					</span>
					</div>
					<!---->
					<!---->
					<div class="danmu-this">
						<span id="" class="danmu-this-time">
						00:00
					</span>
						<span id="" class="danmu-this-this">
						火前留名
					</span>
						<span id="" class="danmu-this-sendtime">
						10-10 19:30
					</span>
					</div>
					<!---->
					<!---->
					<div class="danmu-this">
						<span id="" class="danmu-this-time">
						00:00
					</span>
						<span id="" class="danmu-this-this">
						火前留名
					</span>
						<span id="" class="danmu-this-sendtime">
						10-10 19:30
					</span>
					</div>
					<!---->
					<!---->
					<div class="danmu-this">
						<span id="" class="danmu-this-time">
						00:00
					</span>
						<span id="" class="danmu-this-this">
						火前留名
					</span>
						<span id="" class="danmu-this-sendtime">
						10-10 19:30
					</span>
					</div>
					<!---->
					<!---->
					<div class="danmu-this">
						<span id="" class="danmu-this-time">
						00:00
					</span>
						<span id="" class="danmu-this-this">
						火前留名
					</span>
						<span id="" class="danmu-this-sendtime">
						10-10 19:30
					</span>
					</div>
					<!---->
					<!---->
					<div class="danmu-this">
						<span id="" class="danmu-this-time">
						00:00
					</span>
						<span id="" class="danmu-this-this">
						火前留名
					</span>
						<span id="" class="danmu-this-sendtime">
						10-10 19:30
					</span>
					</div>
					<!---->
					<!---->
					<div class="danmu-this">
						<span id="" class="danmu-this-time">
						00:00
					</span>
						<span id="" class="danmu-this-this">
						火前留名
					</span>
						<span id="" class="danmu-this-sendtime">
						10-10 19:30
					</span>
					</div>
					<!---->
					<!---->
					<div class="danmu-this">
						<span id="" class="danmu-this-time">
						00:00
					</span>
						<span id="" class="danmu-this-this">
						火前留名
					</span>
						<span id="" class="danmu-this-sendtime">
						10-10 19:30
					</span>
					</div>
					<!---->
				</div>
			</div>
			<div id="video-show-tuijian">
				<div id="">
					相关推荐：
				</div>
				<!---->
				<div class="video-page-card">
					<img src="img/logo.jpg" alt="John Doe" class="">
					<div id="" class="wenzi-box">
						<a href="" class="title-a" style="color: black;text-decoration: none;font-size: 14px;margin-bottom: 6px;">鬼畜调教王司徒，大战诸葛村妇人，双人舞全明星</a>
						<a href="" class="title-username" style="color: #999999;text-decoration: none;font-size: 13px;margin-bottom: 6px;">mtstudio</a>
						<div class="count" style="color: #999999;text-decoration: none;font-size: 13px;margin-bottom: 6px;">
							777播放&nbsp;.&nbsp;7弹幕
						</div>
					</div>
				</div>
				<!---->
				<!---->
				<div class="video-page-card">
					<img src="img/logo.jpg" alt="John Doe" class="">
					<div id="" class="wenzi-box">
						<a href="" class="title-a" style="color: black;text-decoration: none;font-size: 14px;margin-bottom: 6px;">鬼畜调教王司徒，大战诸葛村妇人，双人舞全明星</a>
						<a href="" class="title-username" style="color: #999999;text-decoration: none;font-size: 13px;margin-bottom: 6px;">mtstudio</a>
						<div class="count" style="color: #999999;text-decoration: none;font-size: 13px;margin-bottom: 6px;">
							777播放&nbsp;.&nbsp;7弹幕
						</div>
					</div>
				</div>
				<!---->
				<!---->
				<div class="video-page-card">
					<img src="img/logo.jpg" alt="John Doe" class="">
					<div id="" class="wenzi-box">
						<a href="" class="title-a" style="color: black;text-decoration: none;font-size: 14px;margin-bottom: 6px;">鬼畜调教王司徒，大战诸葛村妇人，双人舞全明星</a>
						<a href="" class="title-username" style="color: #999999;text-decoration: none;font-size: 13px;margin-bottom: 6px;">mtstudio</a>
						<div class="count" style="color: #999999;text-decoration: none;font-size: 13px;margin-bottom: 6px;">
							777播放&nbsp;.&nbsp;7弹幕
						</div>
					</div>
				</div>
				<!---->
				<!---->
				<div class="video-page-card">
					<img src="img/logo.jpg" alt="John Doe" class="">
					<div id="" class="wenzi-box">
						<a href="" class="title-a" style="color: black;text-decoration: none;font-size: 14px;margin-bottom: 6px;">鬼畜调教王司徒，大战诸葛村妇人，双人舞全明星</a>
						<a href="" class="title-username" style="color: #999999;text-decoration: none;font-size: 13px;margin-bottom: 6px;">mtstudio</a>
						<div class="count" style="color: #999999;text-decoration: none;font-size: 13px;margin-bottom: 6px;">
							777播放&nbsp;.&nbsp;7弹幕
						</div>
					</div>
				</div>
				<!---->
				<!---->
				<div class="video-page-card">
					<img src="img/logo.jpg" alt="John Doe" class="">
					<div id="" class="wenzi-box">
						<a href="" class="title-a" style="color: black;text-decoration: none;font-size: 14px;margin-bottom: 6px;">鬼畜调教王司徒，大战诸葛村妇人，双人舞全明星</a>
						<a href="" class="title-username" style="color: #999999;text-decoration: none;font-size: 13px;margin-bottom: 6px;">mtstudio</a>
						<div class="count" style="color: #999999;text-decoration: none;font-size: 13px;margin-bottom: 6px;">
							777播放&nbsp;.&nbsp;7弹幕
						</div>
					</div>
				</div>
				<!---->
			</div>
		</div>
	</body>

</html>